import React from "react";
import {Badge, TabBar} from "antd-mobile";
import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
    ClockCircleOutline
} from "antd-mobile-icons";
import  "./position.css";
import {useLocation, useNavigate} from "react-router-dom";

interface TabBarProps {

}
const NavTabBar = (props: TabBarProps)=>{
    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
        {
            key: '/favour',
            title: '优惠',
            icon: <UnorderedListOutline />,
            badge: '5',
        },
        {
            key: '/order',
            title: '订单',
            icon: <ClockCircleOutline />,
            badge: '99+',
        },
        {
            key: '/me',
            title: '我的',
            icon: <UserOutline />,
        },
    ];

    const location = useLocation();
    const navigate = useNavigate();
    let {pathname} = location;
    const setActiveKey = (key: string)=>{
        navigate(key);
    }

    return (
        <TabBar activeKey={pathname} onChange={setActiveKey} style={{
            backgroundColor: "white",
            position: "fixed",
            bottom: 0,
            width: "100%"
        }}>
            {tabs.map(item=>(<TabBar.Item key={item.key} title={item.title} icon={item.icon}/>))}
        </TabBar>
    );
}

export default NavTabBar;
